<template>
  <div class="detailView">
    <!-- 
      tab
     -->
    <TabControl ref="tabRef" v-show="showTabs" class="tabs" :tabsTitle="['房东介绍', '热门评论', '预定须知', '位置周边']"
      @clickTab="clickTab">
    </TabControl>

    <!-- 
      顶部返回
     -->
    <van-nav-bar ref="navBarRef" title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />


    <!-- 
      轮播图
     -->
    <DetailSwipe :housePicture="mainPart?.topModule?.housePicture"></DetailSwipe>

    <!-- 
      顶部简介
     -->
    <DetatilTopBrief :houseBrief="mainPart?.topModule"></DetatilTopBrief>


    <!-- 
      房东介绍
     -->
    <DetailLandlord :ref="getSectionRef" :landlordModule="mainPart?.dynamicModule?.landlordModule">
    </DetailLandlord>


    <!-- 
      热门评论
      -->
    <DetailComment :ref="getSectionRef" :commentModule="mainPart?.dynamicModule?.commentModule">
    </DetailComment>


    <!-- 
      预定须知
     -->
    <DetailRules :ref="getSectionRef" :rulesModule="mainPart?.dynamicModule?.rulesModule">
    </DetailRules>


    <!-- 
      位置周边
     -->
    <DetailPosition :ref="getSectionRef" :positionModule="mainPart?.dynamicModule?.positionModule">
    </DetailPosition>

    <footer style="height: 800px;"></footer>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useDetailStore } from "@/stores/detail.js";
import { storeToRefs } from 'pinia';
import DetailSwipe from "../../views/detail/components/DetailSwipe.vue";
import DetatilTopBrief from "../../views/detail/components/DetatilTopBrief.vue";
import DetailLandlord from "../../views/detail/components/DetailLandlord.vue";
import DetailComment from "../../views/detail/components/DetailComment.vue";
import DetailRules from "../../views/detail/components/DetailRules.vue";
import DetailPosition from "../../views/detail/components/DetailPosition.vue";
import TabControl from "../../components/TabControl/TabControl.vue"
import useScroll from '../../hooks/useScroll.js'

// 1.滚动到300px 显示tab栏
const { isBottom, scrollTop, clientHeight, scrollHeight } = useScroll()
const showTabs = computed(() => {
  return scrollTop.value > 300
})
// 2.点击tab 滑动到对应位置
let sectionEls = []
function getSectionRef(value) {
  if (!value) return
  // value.$el 获取当前组件的根元素
  sectionEls.push(value.$el)
  sectionEls = [...new Set(sectionEls)]
}
// scrollTo为DOM相关API
function clickTab(index) {
  window.scrollTo({
    top: sectionEls[index].offsetTop,
    behavior: 'smooth'
  });
}
// 3.页面滚动 匹配到对应tab的下标
// 监听scrollTop变化，找到第一个offset（当scrollTop>=某个tab所对应的offset时），保存该offset对应的tab的下标index
// 例如 scrollTop=600 offsetArr=[100,300,800,1000] 800>=600 则保存300所对应的下标1 
//      scrollTop=6000 返回下标offsetArr.length-1
//      scrollTop=6    返回下标-1
let tabRef = ref()
watch(scrollTop, (newVal) => {
  // 遍历各个位置的范围区间
  const valueArr = sectionEls.map(el => el.offsetTop).slice(0, sectionEls.length)

  let index = valueArr.length - 1
  for (let i = 0; i < valueArr.length; i++) {
    // 26为tab栏高度 避免遮挡
    if (valueArr[i] >= newVal + 26) {
      index = i - 1
      break
    }
  }

  // 修改tab组件的当前下标
  tabRef.value.curIndex = index
})



// 1.返回
const router = useRouter()
const onClickLeft = () => router.back();

// 2.请求详情数据
// 获取houseid 
const route = useRoute()
// store实例
const detailStore = useDetailStore()
// 请求
detailStore.fetchDetailByHouseid(route.params.houseId)
// 解构出数据
const { detailArr, mainPart } = storeToRefs(detailStore)

</script>

<style scoped lang="less">
.detailView {
  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 99;
  }

  :deep(.van-nav-bar) {

    .van-icon {
      color: var(--primary-color);
    }

    .van-nav-bar__text {
      color: var(--primary-color);
    }

    .van-nav-bar__title {
      color: var(--primary-color);
    }
  }
}
</style>
